<template>
  <!-- 弹框-->
  <a-modal
    :title="$t('all.autotext931')"
    :visible="visible"
    @cancel="clickCancel()"
    @ok="clickConfirm()"
    width="650px"
    :confirmLoading="confirmLoading"
  >
    <a-descriptions :title="$t('all.autotext720')">
      <a-descriptions-item :label="$t('all.autotext901')">
        {{ userName }}
      </a-descriptions-item>
      <a-descriptions-item :label="$t('all.autotext758')">
        {{ nowTime | moment('YYYY-MM-DD') }}
      </a-descriptions-item>
    </a-descriptions>
    <!-- :label-col="{ span: 4 }"
      :wrapper-col="{ span: 15 }" -->
    <a-form-model
      ref="ruleForm"
      :rules="rules"
      :model="form"

      labelAlign="left"
    >
      <a-form-model-item :label="$t('all.autotext649')">
        <!-- <a-select v-model="form.proId" placeholder="请选择项目">
          <a-select-option v-for="item in itemList" :key="item.id" @click="select(item.id, 'proId')">
            {{ item.name }}
          </a-select-option>
        </a-select> -->
        <span>{{ this.proNames }}</span>
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext455')" prop="reId">
        <a-select v-model="form.reId" :placeholder="$t('all.autotext997')">
          <a-select-option v-for="item in centers" :key="item.id" @click="select(item.id, 'reId')">
            {{ item.orgName }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-descriptions :title="$t('all.autotext630')"></a-descriptions>
      <a-form-model-item prop="signType">
        <a-radio-group v-model="form.signType">
          <a-radio :value="1">{{ $t('all.autotext580') }}</a-radio>
          <a-radio :value="2">{{ $t('all.autotext565') }}</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item v-if="form.signType == 1" :label="$t('all.autotext1149')" prop="contractId">
        <a-select v-model="form.contractId" :placeholder="$t('all.autotext1252')">
          <a-select-option v-for="item in templateList" :key="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item v-if="form.signType == 2" :label="$t('all.autotext235')" prop="fileName">
        <a-input v-model="form.fileName" :placeholder="$t('all.autotext1418')" />
      </a-form-model-item>
    </a-form-model>
    <div style="display: flex;">
      <a-descriptions :title="$t('all.autotext855')" style="width: 12%;"></a-descriptions>
      <span>{{ selectedNumber }}{{ $t('all.autotext700') }}</span>
    </div>
    <a-table
      :columns="columns"
      bordered
      :data-source="ShowResearcherList"
      :row-selection="rowSelection"
      :expanded-row-keys.sync="expandedRowKeys"
      :pagination="false"
    />
  </a-modal>
</template>
<script>
import store from '@/store'
import { getTemplateList, getShowResearcher, getProName } from '@/api/overview/contract.js'
// import { centerList } from '@/api/overview/member.js'
import { getContractCenter } from '@/api/overview/member.js'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  components: {},
  computed: {
    rowSelection () {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.collectRow(selectedRowKeys, selectedRows)
        },
        selectedRowKeys: this.selectedRowKeys
      }
    }
  },
  data () {
    const columns = [
      {
        title: this.$t('all.autotext1150'),
        dataIndex: 'researchNo',
        customRender: (text, record) => {
          return record.account ? record.account : record.researchNo
        }
      },
      {
        title: this.$t('all.autotext675'),
        dataIndex: 'proName',
        scopedSlots: { customRender: 'proName' }
      },
      {
        title: this.$t('all.autotext357'),
        dataIndex: 'orgName'
      }
    ]
    return {
      proId: '', // 项目id
      // proId: null, // 项目id
      // itemList: [], // 项目列表
      reId: '', // 中心id
      centers: [], // 中心列表
      templateList: [], // 合同模版列表
      ShowResearcherList: [], // 人员列表
      sysAdmins: '', // 选中人员id字符串
      confirmLoading: false,
      // title: '发起合同', // 动态标题
      // labelCol: { span: 4 },
      // wrapperCol: { span: 15 },
      rules: {
        // 校验规则
        reId: [{ required: true, message: this.$t('all.autotext997') }],
        contractId: [{ required: true, message: this.$t('all.autotext461') }],
        fileName: [{ required: true, message: this.$t('all.autotext513') }],
        signType: [{ required: true, message: this.$t('all.autotext1333') }]
      },
      // 表单内容
      form: {
        signType: 1
      },
      signType: 1,
      columns,
      expandedRowKeys: [],
      selectedRowKeys: [],
      selectedGroud: null,
      selectedNumber: 0,
      nowTime: '',
      userName: '',
      proNames: ''
    }
  },
  created () {
    const pd = localStorage.getItem('CURRENT_PROID')
    if (pd) {
      this.proId = parseInt(pd)
    }
    this.userName = store.getters.userInfo.account
    this.nowTime = Date.parse(new Date())
  },
  watch: {
    visible (newValue) {
      if (newValue) {
        this.getTheName()
        this.getCenterList()
      }
    },
    // 外部启用/禁用合同后需重新请求数据列表
    signType (val) {
      if (parseInt(val) !== 1) {
        // this.getTemplate()
      }
    },
    form (arr) {
      if (arr.proId !== '') {
        // this.proId = arr.proId
        this.getCenterList()
      }
    },
    reId (arr) {
      if (arr !== '' || this.proId !== '') {
        this.getResearcher()
      }
    }
  },
  methods: {
    // 选择集合
    collectRow (selectedRowKeys, Rows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedGroud = Rows
      this.selectedNumber = this.selectedGroud.length
      console.log('111', this.selectedGroud)
    },
    select (value, status) {
      console.log(value, status)
      if (status === 'proId') {
        this.proId = value
        // this.getTemplate()
      } else {
        this.reId = value
      }
    },
    // getUserList () {
    //   getProjectList({ pageNumber: 1, pageSize: 10000, status: 2 })
    //     .then(res => {
    //       console.log(res)
    //       this.itemList = res.page.content
    //     })
    //     .catch(row => {})
    // },
    getTheName () {
      // debugger
      getProName({ proId: this.proId })
        .then(res => {
          console.log(res, '{}{}{}{}{}{}{}{}{}')
          this.proNames = res
        })
        .catch(() => {
          console.log('ddddddddd')
        })
    },
    getCenterList () {
      getContractCenter({ pageNumber: 1, deleted: 0, proId: this.proId })
        .then(res => {
          this.centers = res.content
          this.$forceUpdate()
        })
        .catch(row => {})
    },
    // 合同模版
    getTemplate () {
      console.log(this.proId)
      getTemplateList({ pageNumber: 1, proId: this.proId, status: 1 })
        .then(res => {
          this.templateList = res.content
        })
        .catch(() => {})
    },
    getResearcher () {
      getShowResearcher({ proId: this.proId, reId: this.reId })
        .then(res => {
          console.log(res)
          this.ShowResearcherList = res
        })
        .catch(() => {})
    },
    clickCancel () {
      this.form = {}
      this.ShowResearcherList = []
      this.reId = ''
      this.$emit('modalCancel')
    },
    clickConfirm () {
      this.confirmLoading = true
      this.$refs.ruleForm.validate(valid => {
        if (valid && this.form.signType) {
          if (this.selectedGroud && this.selectedGroud.length) {
            if (parseInt(this.form.signType) === 1) {
              this.addElectronic()
            } else {
              this.addFile()
            }
            console.log(this.selectedGroud)
            const arr = []
            this.selectedGroud.forEach(item => {
              arr.push(item.researchNo)
            })
            this.sysAdmins = arr.toString()
            // console.log(this.sysAdmins)
            // console.log(typeof this.sysAdmins)
            let fileName
            if (this.form.signType === 2) {
              fileName = this.form.fileName
            } else {
              fileName = this.form.contractId ? this.templateList.find(item => item.id === this.form.contractId).name : ''
            }
            const form = {
              proId: this.proId,
              signType: this.form.signType,
              contractId: this.form.contractId,
              fileName: fileName,
              sysAdmins: this.sysAdmins,
              signTypeDesc: this.form.signType === 1 ? this.$t('all.autotext580') : this.$t('all.autotext565'),
              researchId: this.reId
            }
            this.$emit('modalOk', form)
          } else {
            this.$message.error(this.$t('all.autotext1437'))
            this.confirmLoading = false
          }
        } else {
          console.log('error submit!!')
          this.confirmLoading = false
          return false
        }
      })
    },
    // 新增上传电子签署埋点
    addElectronic () {},
    // 新增文件埋点
    addFile () {}
  }
}
</script>
